<template>
  <div class="total-bar">
    <div class="total-wrap font-12">
      <div class="total-wrap-1280 flex-between mar-t--7">
        <div class="font-16 total-coin-1280"><span class="font-white" style="font-size:46px;line-height:76px;">{{totalDataStat.totalOrderPrice}}</span>{{resDataStat.totalOrderPrice >= 10000 ? '万元' : '元'}}</div>
        <div class="align-c" :class="{ 'nullCompare': !totalDataStat.totalOrderPriceCompare }">
          <total-compare :compare="totalDataStat.totalOrderPriceCompare" :dateIndex="dateIndex"></total-compare>
        </div>
      </div>
      <div class="flex flex-between mar-t-16">
        <div class="price-wrap">
          <img :src="homeShop" class="width-18 height-18" alt="">
          <div class="mar-l-7 flex-item">零售 <span class="font-white font-14">{{totalDataStat.retailOrderPrice}}</span>{{resDataStat.retailOrderPrice >= 10000 ? ' 万元' : ' 元'}}</div>
        </div>
        <total-compare :compare="totalDataStat.retailOrderPriceCompare" :dateIndex="dateIndex" :showtitle="false"></total-compare>
      </div>
      <div class="flex flex-between mar-t-14">
        <div class="price-wrap">
          <img :src="homeMaterial" class="width-18 height-18" alt="">
          <div class="mar-l-7 flex-item">批发 <span class="font-white font-14">{{totalDataStat.wholesaleOrderPrice}}</span>{{resDataStat.wholesaleOrderPrice >= 10000 ? ' 万元' : ' 元'}}</div>
        </div>
        <total-compare :compare="totalDataStat.wholesaleOrderPriceCompare" :dateIndex="dateIndex" :showtitle="false"></total-compare>
      </div>
    </div>
    <div class="total-item">
      <div class="font-16">支付订单数(笔)</div>
      <div class="total-item--bfc font-14 mar-t-6">
        <div class="flex-between height-44">
          <div class="font-24 color-white">{{totalDataStat.totalOrderNum}}</div>
          <total-compare class="total-1280-none" :compare="totalDataStat.totalOrderNumCompare" :dateIndex="dateIndex"></total-compare>
        </div>
        <div class="mar-t-15 flex-1280"><span>零售订单</span><span class="color-white mar-l-11 font-16">{{totalDataStat.retailOrderNum}}</span></div>
        <div class="flex-1280"><span>批发订单</span><span class="color-white mar-l-11 font-16">{{totalDataStat.wholesaleOrderNum}}</span></div>
        <total-compare class="total-1280-block" :compare="totalDataStat.totalOrderNumCompare" :dateIndex="dateIndex"></total-compare>
      </div>
    </div>
    <div class="total-item">
      <div class="font-16">支付人数(人)</div>
      <div class="total-item--bfc font-14 mar-t-6">
        <div class="flex-between height-44">
          <div class="font-24 color-white">{{totalDataStat.totalCustomerMemberNum}}</div>
          <total-compare class="total-1280-none" :compare="totalDataStat.totalCustomerMemberNumCompare" :dateIndex="dateIndex"></total-compare>
        </div>
        <div class="mar-t-15 flex-1280"><span>零售订单</span><span class="color-white mar-l-11 font-16">{{totalDataStat.retailCustomerMemberNum}}</span></div>
        <div class="flex-1280"><span>批发订单</span><span class="color-white mar-l-11 font-16">{{totalDataStat.wholesaleCustomerMemberNum}}</span></div>
        <total-compare class="total-1280-block" :compare="totalDataStat.totalCustomerMemberNumCompare" :dateIndex="dateIndex"></total-compare>
      </div>
    </div>
    <div class="total-item">
      <div class="font-16">客单价(元)</div>
      <div class="total-item--bfc font-14 mar-t-6">
        <div class="flex-between height-44">
          <div class="font-24 color-white">{{totalDataStat.totalCustomerUnitPrice}}</div>
          <total-compare class="total-1280-none" :compare="totalDataStat.totalCustomerUnitPriceCompare" :dateIndex="dateIndex"></total-compare>
        </div>
        <div class="mar-t-15 flex-1280"><span>零售商品</span><span class="color-white mar-l-11 font-16">{{totalDataStat.retailCustomerUnitPrice}}</span></div>
        <div class="flex-1280"><span>批发商品</span><span class="color-white mar-l-11 font-16">{{totalDataStat.wholesaleCustomerUnitPrice}}</span></div>
        <total-compare class="total-1280-block" :compare="totalDataStat.totalCustomerUnitPriceCompare" :dateIndex="dateIndex"></total-compare>
      </div>
    </div>
    <div class="total-item last-total">
      <div class="font-16">累计用户数(人)</div>
      <div class="total-item--bfc font-14 mar-t-6">
        <div class="flex-between height-44">
          <div class="font-24 color-white">{{totalDataStat.totalMemberNum}}</div>
          <total-compare class="total-1280-none" :compare="totalDataStat.totalMemberNumCompare" :dateIndex="dateIndex"></total-compare>
        </div>
        <div class="mar-t-15 no-mar-1280 flex-between">
          <div class="flex-item flex-1280"><span>店主</span><span class="color-white mar-l-11 font-16">{{totalDataStat.shopNum}}</span></div>
          <div class="flex-item flex-1280"><span>分销商</span><span class="color-white mar-l-11 font-16">{{totalDataStat.shareMemberNum}}</span></div>
        </div>
        <div class="flex-between">
          <div class="flex-item flex-1280">主播<span class="color-white mar-l-11 font-16">{{totalDataStat.anchorNum}}</span></div>
          <div class="flex-item flex-1280">批发商<span class="color-white mar-l-11 font-16">{{totalDataStat.wholesaleNum}}</span></div>
        </div>
        <total-compare class="total-1280-block" :compare="totalDataStat.totalMemberNumCompare" :dateIndex="dateIndex"></total-compare>
      </div>
    </div>
  </div>
</template>
<script>
import homeRink from '@/assets/images/home-rink.png'
import homeShop from '@/assets/images/home-shop-icon.png'
import homeMaterial from '@/assets/images/home-material-icon.png'
import { dataStat } from '@/api/goods/statistics'
import TotalCompare from '../total-compare/index'
export default {
  components: { TotalCompare },
  props: {
    dataDetail: {
      type: Object,
      default: function() {
        return {}
      }
    },
    dateIndex: {
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      homeRink,
      homeShop,
      homeMaterial,
      totalDataStat: {},
      resDataStat: {},
      clientWidth: 0
    }
  },
  watch: {
    dateIndex() {
      this.dataStat()
    }
  },
  mounted() {
    this.clientWidth = document.documentElement.clientWidth
    this.dataStat()
  },
  methods: {
    // 获取头部数据
    dataStat() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      dataStat(params).then(response => {
        // this.totalDataStat = response.data
        this.resDataStat = response.data
        this.totalDataStat = {}
        Object.keys(this.resDataStat).forEach(key => {
          switch (key) {
            case 'totalOrderPrice':
            case 'retailOrderPrice':
            case 'wholesaleOrderPrice':
              this.totalDataStat[key] = this.formatData(this.resDataStat[key], 10000, '')
              break
            default:
              this.totalDataStat[key] = this.formatData(this.resDataStat[key])
              break
          }
        })
        // this.totalDataStat = tsData
      }).catch(() => {})
    },
    // 格式化数据信息
    formatData(num, tsNum = 10000, unit = 'w') {
      if (num < tsNum) return String(num).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
      if (num >= tsNum) {
        const _num = (num * 1 / 10000).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return `${_num}${unit}`
      }
    }
  }
}
</script>
<style lang="less" scoped>
.total-bar{
  display: flex;
  align-items: flex-start;
  padding: 30px 0 0;
  .total-wrap{
    color: rgba(255, 255, 255, .5);
    width: 358px;
    padding-right: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
    .total-wrap-1280{
      height: 76px;
    }
    .font-white{
      color: white;
    }
    .price-wrap{
      background-color: #212123;
      border-radius: 15px;
      height: 30px;
      line-height: 30px;
      min-width: 146px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .align-c{
      justify-content: space-between;
      align-items: flex-end;
      // height: 56px;
    }
  }
  .nullCompare{
    color: rgba(255, 255, 255, .3);
  }
  .total-item{
    flex: 1;
    width: 320px;
    box-sizing: border-box;
    padding: 15px 29px 18px 22px;
    background-color: #313134;
    color: rgba(255, 255, 255, .5);
    border: 1px solid #414144;
    margin-left: 16px;
    .color-white{
      color: #fff;
    }
    &--bfc{
      overflow: hidden;
    }
    &__left{
      float: left;
    }
    &__right{
      float: right;
    }
  }
  .total-1280-none{
    display: block;
  }
  .total-1280-block{
    display: none;
  }
}
@media screen and (max-width: 1440px) {
  .total-bar{
    .total-wrap{
      width: 398px;
      height: 260px;
      padding-right: 0;
      flex-shrink: 0;
      flex: unset;
      // .total-wrap-1280{
      //   height: unset;
      //   flex-direction: column;
      //   align-items: flex-end;
      // }
      // .total-coin-1280{
      //   width: 100%;
      //   text-align: left;
      // }
    }
    .total-1280-none{
      display: none;
    }
    .total-1280-block{
      display: block;
      margin-top: 9px;
    }
    .total-item{
      min-width: 165px;
      flex: 1;
      height: 260px;
    }
    .no-mar-1280{
      margin-top: 0;
    }
    .total-item--bfc{
      .flex-1280{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px;
        &:nth-child(2){
          margin-top: 5px;
        }
        .mar-l-11{
          margin-left: 0;
        }
      }
    }
    .last-total{
      .total-item--bfc{
        .flex-1280{
          &:nth-child(2){
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
